<template>
  <div class="modifyMobile">
        <div class="header_group">
              <h6>更换手机号</h6>
              <p>请输入新的手机号后继续</p>
        </div>
        <ul class="info">
             <li>
                 <label>手机号</label>
                 <input type="text" v-model="mobile" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="您的手机号码"/>
             </li>
             <li>
                 <label>验证码</label>
                 <input type="text" v-model="authCode" placeholder="验证码" maxlength="6" onkeyup="value=value.replace(/[^\d]/g,'')"/>
                 <button v-if="status=='able'" class="getCode" @click="clock();">{{getCodeHint}}</button>
                 <button v-else class="getCode" disabled>{{getCodeHint}}</button>
             </li>
        </ul>
        <p class="commit" @click="commit();">保存</p>
  </div>
</template>

<script>
export default {
    data(){
        return{
           mobile:'',
           authCode:'',
           getCodeHint:'获取验证码',
           status:'able'
        }
    },
    methods:{
      clock(){
        let _this=this;
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(_this.mobile))){ 
          alert("请输入有效的手机号码"); 
          return false; 
        } 
        _this.status="disable";
        _this.$http.get("/api/comnControl.do?mobileNo="+_this.mobile+"&getMessageAuthenticationCode=null")
        .then(
          (response)=>{
              let t=60;
              let timer=setInterval(function(){
                t--;
                if(t>0){
                   _this.getCodeHint=`${t}s`;
                }else{
                   clearTimeout(timer);
                   _this.getCodeHint="重新获取";
                   _this.status="able";
                }
              },1000)
          },
          (error)=>{
            console.log(error);
             _this.status="able";
          }
        );
      },
      commit(){
        let _this=this;
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(_this.mobile))){ 
          alert("请输入有效的手机号码"); 
          return false; 
        } 
        if(_this.authCode.length!=6){
            alert("请输入六位验证码");
            return false;
        }
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.modifyMobile
{
   .header_group
   {
      padding:0.5rem 0;
      text-align:center;
      h6
      {
        color:#078def;
        font-size:0.5rem;
        margin-bottom:0.3rem;
        font-weight:normal;
      }
      p 
      {
        color:#999;
      }
   }
   .info
   {
      background:#fff;
      padding-left:0.3rem;
      border-top:1px solid #eee;
      border-bottom:1px solid #eee;
      li
      {
        position:relative;
        padding:0 2rem 0 1.5rem;
        height:0.88rem;
        line-height:0.88rem;
        &:first-child
        {
          border-bottom:1px solid #eee;
          padding:0 0 0 1.5rem;
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
        }
        .getCode
        {
          line-height:0.55rem;
          height:0.59rem;
          border:1px solid #078def;
          border-radius:0.1rem;
          color:#078def;
          width:1.8rem;
          text-align:center;
          position:absolute;
          right:0.3rem;
          top:0.15rem;
          background:#fff;
          font-size:0.24rem;
        }
      }
   }
   .commit
   {
      margin:0.2rem 0.24rem;
      line-height:0.8rem;
      height:0.8rem;
      border-radius:0.1rem;
      border:1px solid #ccc;
      text-align:center;
      background:#078def;
      color:#fff;
      font-size:0.32rem;
   }
}
</style>
